<template>
  <h1>当前求和结果:{{ sum }}</h1>
  <br />
  <button @click="sum++">sum+1</button>
</template>

<script>
// 引入需要的组合
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";

export default {
  name: "WatchDemo",
  setup() {
    console.log("setup--------");
    // 监视的数据
    let sum = ref(0);

    // 组合式API形式使用生命钩子
    onBeforeMount(() => {
      console.log("onBeforeMount----");
    });

    onMounted(() => {
      console.log("onMounted----");
    });

    onBeforeUpdate(() => {
      console.log("onBeforeMount----");
    });

    onUpdated(() => {
      console.log("onUpdated----");
    });

    onBeforeUnmount(() => {
      console.log("onBeforeUnmount----");
    });

    onUnmounted(() => {
      console.log("onUnmounted----");
    });
    return { sum };
  },

  // 配置项形式Vue3中的生命钩子
  beforeCreate() {
    console.log("beforeCreate--------");
  },
  created() {
    console.log("created--------");
  },
  beforeMount() {
    console.log("beforeMount--------");
  },
  mounted() {
    console.log("mounted--------");
  },
  beforeUpdate() {
    console.log("beforeUpdate--------");
  },
  updated() {
    console.log("updated--------");
  },
  beforeUnmount() {
    console.log("beforeUnmount--------");
  },
  unmounted() {
    console.log("unmounted--------");
  },
};
</script>
